<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展行显示细节</title>
    <link href="/themes/icon.css" rel="stylesheet" type="text/css" >
    <link href="/themes/default/easyui.css" rel="stylesheet" type="text/css" >
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.easyui.min.js"></script>
    <script src="/js/easyui-lang-zh_CN.js"></script>
    <script src="/js/datagrid-detailview.js"></script>
</head>
<body>
   

    <table id="dg" style="width:700px;height:500px;" >

    </table>

    <div id="mm" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;" >
        <div data-options="name:'edit',iconCls:'icon-edit'" >Edit</div>
        <div data-options="name:'delete',iconCls:'icon-remove'" >Delete</div>
    </div>

    <script>
        $(function(){

            $('#dg').datagrid({
                title: "图书列表",
                url: "book_list.json",
                method: "get",
                pagination:true, //显示分页栏
                pageNumber:1,
                idField:'id',
                rownumbers: true,
                pageSize:10,
                pageList:[5,10,15,20,30],
                singleSelect:true,
                columns:[[
                    {field:'id',title:'ID',width:50,align:'center'},
                    {field:'name',title:'书名',width:250},
                    {field:'publishDate',title:'出版日期',width:100},
                    {field:'price',title:'价格',width:100},
                    {field:'category',title:'分类',width:100,formatter:function(value,row,index){
                        return row.category.name;
                    }}
                ]],
                view:detailview,   //指定展开视图名
                detailFormatter:function(index,row){
                    return '<div id="divPanel" class="ddv" style="padding:5px 0"></div>';   //格式化设置外卫边距
                },
                onExpandRow:function(index,row){    //点击展开时触发事件
                    //获取当前行
                    console.log($(this).datagrid('getRowDetail',index));
                    //获取当前行,并且去查找div.ddv(元素为div,且class为ddv的元素)
                    var ddv=$(this).datagrid('getRowDetail',index).find("div.ddv");
                    //将它初始化为panel
                    ddv.panel({
                        border:false, //设置面板无边框
                        cache:false,  //设置无缓存
                        //href:'book_details.html',  //book_details.html?id=${row.id}`, //请求地址
                        //queryParams:{id:row.id},
                        href:`book_details.html?id=${row.id}`,
                        onLoad:function(){  //当面板加载的时候
                            //固定当前这行的高度
                            $("#dg").datagrid("fixDetailRowHeight",index);
                        }
                    });
                    
                    $("#dg").datagrid("fixDetailRowHeight",index);
                },
                //表头右键菜单
                fitColumns:true, //(fitColumns:设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。) //在表头上点击右键,控制显示的列需要加fitColumns:true
                onHeaderContextMenu:function(e,field){  //onHeaderContextMenu:处理表头的右键菜单
                    e.preventDefault();//阻止浏览器默认的右键事件
                    if(!cmenu){  //判断有没有创建菜单
                        createColumnMenu();  //如果没有创建菜单就创建一个菜单
                    }

                    //根据当前坐标显示菜单
                    cmenu.menu('show',{
                        left:e.pageX,
                        top:e.pageY,
                    });

                },
                //行右键菜单
                onRowContextMenu:function(e,rowIndex,rowData){
                    e.preventDefault();//阻止默认事件
                    $(this).datagrid("selectRow",rowIndex); //选中一行，行索引从 0 开始
                    $('#mm').menu('show',{
                        left:e.pageX,
                        top:e.pageY
                    });
                }
            });

        });


        var cmenu;

        function createColumnMenu(){
            cmenu=$('<div/>').appendTo('body');  //body中添加<div/>

            cmenu.menu({
                onClick:function(item){
                    if(item.iconCls == 'icon-ok'){
                        $('#dg').datagrid('hideColumn',item.name);
                        cmenu.menu('setIcon',{
                            target:item.target,
                            iconCls:'icon-empty'
                        });
                    }else{
                        $('#dg').datagrid('showColumn',item.name);
                        cmenu.menu('setIcon',{
                            target:item.target,
                            iconCls:'icon-ok'
                        });
                    }
                }
            });

            //获取菜单所有列
            var fields=$('#dg').datagrid('getColumnFields');
            for(var i=0;i<fields.length;i++){
                var field=fields[i];
                var col=$('#dg').datagrid('getColumnOption',field); //这里获取列的选项,遍历列获取到列的名字,添加到菜单里去
                cmenu.menu('appendItem',{
                    text:col.title, //列的标题
                    name:field,
                    iconCls:'icon-ok'
                });
            }

        }


        function menuHandler(){
            var row=$('#dg').datagrid("getSelected");
            alert(row.name);
        }

    </script>
</body>
</html>